import React from 'react';
import {connect} from 'dva/index';
import {Form, Icon, Input, Modal, Select, TreeSelect} from 'antd';
import {convertOrganizations} from '../../utils/commons'

const R = require('ramda');

const FormItem = Form.Item;
const Option = Select.Option;

const userInfo = Form.create({ wrappedComponentRef: true })(class UserInfo extends React.Component {
	constructor(props) {
		super(props);
		this.state = { open: false }
	}

	handleOpen = () => {
		this.setState({ open: true });
	}

	handleCancel = () => {
		this.props.form.resetFields();
		this.setState({ open: false });
	}

	handleConfirm = () => {
		this.props.form.validateFields((errors, values) => {
			if (errors) return;
			let form = {};
			values = R.pick(['username', 'mobile', 'email'], values);
			values.userId = this.props.userInfo.userId;
			if (!R.equals(R.pick(Object.keys(values), this.props.userInfo), values)) {
				this.props.dispatch({
					type: 'app/updateUser',
					payload: {
						...values,
						onSuccess: this.handleCancel.bind(this)
					}
				});
			} else this.handleCancel()
		});
	}

	render() {
		let treeData = R.isNil(this.props.userInfo.organization) ? [] : this.props.userInfo.organization;
		if (!R.isNil(treeData)) {
			treeData = treeData.map(node => {
				return convertOrganizations(node);
			});
		}
		let allRoles = R.isNil(this.props.userInfo.roles) ? [] : this.props.userInfo.roles;
		const { getFieldDecorator, validateFields } = this.props.form;
		const formItemLayout = {
			labelCol: {
				xs: { span: 24 },
				sm: { span: 6 },
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 14 },
			},
		};
		return (
			<Modal visible={this.state.open} title={"个人信息"} onCancel={this.handleCancel.bind(this)} onOk={this.handleConfirm.bind(this)}>
				<Form>
					<FormItem {...formItemLayout} label="登录名" hasFeedback>
						{getFieldDecorator('loginId', {
							rules: [{
								required: true, message: '请输入登录名',
							}],
							initialValue: this.props.userInfo.loginId
						})(
							<Input disabled={true} prefix={<Icon type="user" style={{ fontSize: 13 }} />} />
							)}
					</FormItem>
					<FormItem {...formItemLayout} label="用户名" hasFeedback>
						{getFieldDecorator('username', {
							rules: [{
								required: true, message: '请输入用户名',
							}],
							initialValue: this.props.userInfo.username
						})(
							<Input />
							)}
					</FormItem>
					<FormItem {...formItemLayout} label="手机号码" hasFeedback>
						{getFieldDecorator('mobile', {
							rules: [{
								required: true, message: '请输入手机号码',
							}],
							initialValue: this.props.userInfo.mobile
						})(
							<Input />
							)}
					</FormItem>
					<FormItem {...formItemLayout} label="邮箱" hasFeedback>
						{getFieldDecorator('email', {
							rules: [{
								required: true, message: '请输入邮箱地址',
							}],
							initialValue: this.props.userInfo.email
						})(
							<Input />
							)}
					</FormItem>
					<FormItem {...formItemLayout} label="组织机构" hasFeedback>
						{getFieldDecorator('orgIds', {
							rules: [{
								required: true, message: '请选择组织机构',
							}],
							initialValue: R.isEmpty(this.props.userInfo.orgIds) ? [] : this.props.userInfo.orgIds
						})(
							<TreeSelect
								disabled={true}
								dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
								treeData={treeData}
								placeholder="请选择归属组织"
								allowClear
								multiple
								treeDefaultExpandAll
								filterTreeNode={(inputValue, treeNode) => {
									if (treeNode.props.title.toLowerCase().indexOf(inputValue) != -1) {
										return true;
									}
									return false;
								}}
							/>
							)}
					</FormItem>
					<FormItem {...formItemLayout} label="角色" hasFeedback>
						{getFieldDecorator('roleIds', {
							rules: [{
								required: true, message: '请选择角色',
							}],
							initialValue: R.isNil(this.props.userInfo.roleIds) ? [] : this.props.userInfo.roleIds
						})(
							<Select disabled={true} mode="tags" size={"large"} placeholder="角色可选择多个" style={{ width: '100%' }} showSearch
								filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
							>
								{
									!R.isNil(allRoles) ? allRoles.map(item => {
										return (<Select.Option value={item.roleId + ""} key={item.roleId + ""}>{item.desc}</Select.Option>);
									}) : ''
								}
							</Select>
							)}
					</FormItem>
				</Form>
			</Modal>
		);
	}
})

function mapStateToProps(state) {
	return {
		userInfo: state.app.userInfo
	};
}

export default connect(mapStateToProps)(userInfo);